﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqgrid example</title>
<!-- 引入jQuery -->
<!--表格样式定义，支持 jquery-ui 中的所有 themes-->
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/themes/smoothness/jquery-ui-1.7.2.custom.css"/>
<!--jqgrid 中，定义 themes 的样式在版本3.6.2 中，引入 src/css/ui.jqgrid.css 搜索显示不正常. 可能 src 中的文件都不可以用，仅是源码-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_src/css/ui.jqgrid.css"/>

<!--
 Since the jQuery UI Themes have different font sizes it is a good idea to reduce the font size. This can be done using the style tag in the same file.
-->
<!--由于 jquery-ui 的问题，字体显示不一，故加入该样式-->
<style>
html, body {
	margin: 10;
	padding: 10;
	font-size: 100%;
}
</style>
<!--引入相关 js 文件，引入顺序不能变-->
<script src="jqgrid_src/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="jqgrid_src/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jqgrid_src/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<!-- 开始定义执行函数-->
<script type="text/javascript">

$(function()  
{  

/**
 * 配置文件
 * 参见官方wiki examples
 * 可以在官方 wiki 中 利用 search 功能，搜索配置变量，来快速查找变量含义
 * 执行过程：浏览此页面，即发送了一个请求到 url ，动作执行完成之后，返回本页面
 */
 
     $("#gridTable").jqGrid({
        url:'../json/jqgridlist.action', //数据来源
        datatype: "json",
		editurl:"../json/jqgridedit.action",//编辑后，提交地址.(提交字段可以在验证规则 colModel 参数中的 editrules 中，自定义验证)


		//设置当前页中的数据为客户端排序(有了这句话之后，工具类上面的 search 功能，就不可以用了!)
		//该功能先屏蔽掉，解决后再启用
		//In order local sorting to work properly a sorttype parameter in colModel should be set
		/*
		loadComplete : function () {
   			jQuery("#gridTable").jqGrid('setGridParam',{datatype:'local'});
		},
		onPaging : function(which_button) {
   			jQuery("#gridTable").jqGrid('setGridParam',{datatype:'json'});
		},
		*/
		//设置客户端排序完成

        height: 250,
        mtype: 'POST',
       // rownumbers true,//指定是否给显示从1开始的编号
        colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期','操作','单个说明文字'],
        
        //可以对 colModel 中的参数进行格式化，包括样式,是否可编辑,修改是验证规则 等
        colModel:[
            {name:'id',index:'id', width:60, sorttype:"int",search:true,stype:'text',editable:false,editoptions:{readonly:true,size:10}},  
           //格式化查询
            {name:'userName',index:'userName', width:90,align:'center',sorttype:"string",editable:true,editrules:{required:true},search:true,searchoptions:{defaultValue:'GB/T 1.1-2009', sopt:["eq","ne","cn","nc"],attr:{title:'Select Date'}} }, 
            {name:'gender',index:'gender', width:90,align:'center',editable:true,edittype:"select",editoptions:{value:"男:男;女:女"}},  
            {name:'email',index:'email', width:125,sorttype:"string",editable:true,editrules:{email:true}},
            // 格式化的例子，添加链接
            //http://localhost/someurl.php?id=123&action=edit
            {name:'QQ',index:'QQ',width:100,stype:'select',editable:true,editrules:{number:true,maxValue:900,minValue:123,novalue:true}},
            {name:'mobilePhone',index:'mobilePhone', width:120,sorttype:"string",editable:true,editrules:{number:true,maxValue:6,minValue:4,novalue:true}},
            {name:'birthday',index:'birthday', width:100, sorttype:"date",editable:true,editrules:{date:true}},
            {name:'action',index:'action', width:100, sorttype:"string", formatter:'showlink',formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'id'}},
            //select 例子。其中 列表值可以从数据库中读出
            {name:'selectdemo',index:'selectdemo', width:100, sorttype:"string", align:'center',search:false,editable:true,edittype:'select',editoptions:{value:{cn:'中文',en:'英文',de:'德文',jp:'日文'}}}
        ],
        pager:"#gridPager",  //分页工具栏显示位置
        sortname:'id', //默认排序字段
        sortorder:'asc', //(asc,desc) 点击 jqgrid 刷新工具，默认的排序规则
        viewrecords:true,  //定义是否在导航条上显示总的记录数
        rowNum:10,//传到服务器端的参数,对于请求参数 rows
        rowList:[10,20,30],
		emptyrecords:'无结果',//当返回的数据行数为0时，代替记录总数显示的信息。只有当属性 viewrecords 设置为ture时起作用
        postData:{name1:'hello'},//可以附加到请求上面的参数

        //jsonReader
		//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data&s[]=jsonreader		
		// 描述了从服务器端传过来的 json 中的参数的名字，jqgrid 根据这些定义来读取 json。通过设置别名，不用遵照JQGrid的默认规则。
		// 在生成 json 数据的 action 中，要有下面几个变量，并且都要在json总设置好，便于客户的 jqgrid 读取解析
     	jsonReader: {
				root:"dataRows",		// 保存 json 数据的集合（默认为：rows）
				page: "curPageNo",  	// 当前页（默认为：page）
				total: "totalPages",  // 总页数（默认为：total）
				records: "totalRecords",  // 总记录数（默认为：records）
				repeatitems : false		// 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
				},
	
		//发到服务器端的默认参数的别名，会自动赋值给 action 中的变量，包括 page 类中的变量
		//search 对话框的"重置"按钮，点击之后还会提交一次，以后解决这个问题
       prmNames:{page:"page.pageNo",rows:"page.pageSize", sort: "page.orderBy",order: "page.order", search:"search", nd:"nd",id:"id",oper:"oper",editoper:"edit",addoper:"add",deloper:"del"},
	    // page - the the requested page, 
		// rows - the number of rows requested, 
		// sort - the sorting column, 
		// order - the sort order, 
		// search - the search indicator, 
		// nd - the time passed to the request (for IE browsers not to cache the request), 
		// id - the name of the id when post data in editing modules, 
		// oper - the operation parameter, 
		// editoper - the name of operation when the data is posted in edit mode, 
		// vaddoper - the name of operation when the data is posted in add mode,
		// deloper - the name of operation when the data is posted in delete mode,

	   caption: "jqGrid与Struts2集成,sample"
	 
	}).navGrid('#gridPager',{edit:true,add:true,del:true,search:true,view:true,refresh:true},
	{closeOnEscape:true}, // settings for edit   
	{closeOnEscape:true}, // settings for add   
	{closeOnEscape:true},  // delete instead that del:false we need this   
	{closeOnEscape:true}, // search options  
	{closeOnEscape:true} // view parameters 
	
	//closeOnEscape:true ,  allow the view dialog to be closed when user press ESC key
	
);//jqGrid的格式化是定义在语言包中



//是否出现搜索条
//jQuery("#gridTable").jqGrid('filterToolbar');
//
//定义 editing, adding, deleting, and searching
//jQuery("#gridTable").jqGrid('navGrid','#gridTable',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
//定义全功能导航，参见 wiki examples
 
 //搜索功能不能提交,还不能用，

})  

</script>
</head>
<body>
<table id="gridTable">
</table>
<div id="gridPager"></div>
</body>
</html>
<!--
	
	参考
	http://my.oschina.net/yonge/blog/1905
	http://hi.baidu.com/fangle_life/blog/item/1076b6fa85a9ba1c6d22eb1e.html
	
	 显示样式应用的是 jquery ui ,如果不满意，可以尝试修改他的 css 文件
	
	-->
